<template>
    <div class="paymoney">
        <div>
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left" v-if="orderSn">订单编号：{{orderSn}}</span>
                    <span slot="left" v-else>订单编号：{{orderId}}</span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">订单价格：{{orderAmount}}元</span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">支付方式：微信支付</span>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="bottom_fiexd" @click="pay" v-show="inMode=='weixin'">
            确认支付 ￥
            <yd-countup :endnum="orderAmount" duration="0.1" decimals="2" separator=","></yd-countup>
        </div>
        <div class="bottom_fiexd" @click="pay1" v-show="inMode=='qiye'">
            确认支付 ￥
            <yd-countup :endnum="orderAmount" duration="0.1" decimals="2" separator=","></yd-countup>
        </div>
    </div>
</template>
<script>
import wx from 'weixin-js-sdk'

export default {
    name: 'paymoney',
    data() {
        return {
            orderAmount: 0,
            orderId: '',
            orderlist: '',
            buyType: '',
            orderSn: '',
            openId: '',
            inMode: '',
            pageFlg: ''
        }
    },
    created() {
        // 该页面的迁移源有：purchase、order、orderlist页面
        this.pageFlg = this.$route.query.pageFlg || '';
        // orderSn:19位的OrderSn
        this.orderSn = this.$route.query.orderSn || '';
        // orderId:8位的OrderBatchNumber
        this.orderId = this.$route.query.orderId || '';
        // orderlist:四位的OrderId
        this.orderlist = this.$route.query.orderlist || '';
        this.orderAmount = this.$route.query.orderAmount || 0;
        //是否是送朋友
        this.buyType = this.$route.query.buyType || '';
        this.openId = this.$store.state.openId || '';
        this.inMode = this.$store.state.inMode || '';
    },
    mounted: function() {
        let float = true;
        window.addEventListener("popstate", (e) => {
                if(float)  {
                    float = false;
                    // 从确认下单页面(purchase)跳转时,购物车已被清空，不可返回到purchase页面
                    if (this.pageFlg == 'purchase') {
                        this.$router.push('/');
                    } else {
                        if (this.pageFlg == 'order') {                       
                            // 从我的订单页面(order)跳转时，order页面的迁移源只能是me
                            this.$router.push('/order?pageFlg=me');
                        } else {
                            // 从订单详情页面(orderlist)跳转时，order页面的迁移源只能是me （四位的OrderId）
                            // 先返回到order页面，然后再跳转到orderlist页面
                            this.$router.push('/order?orderId=' + this.orderlist);
                        }
                    }
                }
            }, false);
    },
    methods: {
        pay() {
            this.$dialog.loading.open('请稍后');
            this.wePays(this.orderId, "1");
        },
        pay1() {
            this.$dialog.loading.open('请稍后');
            this.wePays(this.orderId, "2");
        },
        //签名获取
        wePays(orderId, payType) {
            // orderId:8位的OrderBatchNumber
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'wxPay/orderSign?orderId=' + orderId + '&payType=' + payType + '&openId=' + this.openId)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            let _appId = response.data.object.appId;
                            // 微信公众号直接进入
                            if (payType == "1") {
                                wx.config({
                                    appId: response.data.object.appId,
                                    timestamp: response.data.object.timeStamp,
                                    nonceStr: response.data.object.nonceStr,
                                    signature: response.data.object.signature,
                                    jsApiList: ['chooseWXPay']
                                });
                                wx.ready(() => {
                                    this._setWxpayInfo(response.data.object)
                                });
                            } else {
                                // 企业号进入
                                let mwebUrl = response.data.object.mwebUrl;

                                if (this.buyType == 2) {
                                    // _slef.$router.replace('/orderlist?orderId=' + _slef.orderlist);
                                    mwebUrl = mwebUrl + "&redirect_url=" + encodeURIComponent(this.CONSTANT.weChatBaseUrl + "#/orderlist?orderId=" + this.orderlist);
                                } else {
                                    // _slef.$router.replace('/order');
                                    mwebUrl = mwebUrl + "&redirect_url="+ encodeURIComponent(this.CONSTANT.weChatBaseUrl + "#/order");
                                }

                                window.location.replace(mwebUrl);
                            }

                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 600
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        // 发起支付
        _setWxpayInfo(data) {
            let _slef = this;
            wx.chooseWXPay({
                appId: data.appId,
                timestamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data.wxPackage,
                signType: data.signType,
                paySign: data.paySign,
                success(res) {
                    // 发送PV统计请求
                    // _czc.push(["_trackPageview", "/paymoney", ""]); 
                    if (res.errMsg === 'chooseWXPay:ok') {
                        // 发送页面上按钮等交互元素被触发时的事件统计请求
                        _czc.push(["_trackEvent", "确认支付", "支付成功"]);
                        if (_slef.buyType == 2) {
                            _slef.$router.replace('/orderlist?orderId=' + _slef.orderlist);
                        } else {
                            _slef.$router.replace('/order');
                        }
                    } else {
                        window.alert(' 支付失败')
                    }
                },
                cancel() {

                },
                error(res) {
                    window.alert('支付失败')
                }
            })
        }
    }
}
</script>
<style  scoped>
.bottom_fiexd {
    /* position: fixed; */
    width: 96%;
    margin: 0 auto;
    height: 0.9rem;
    /* left: 0;
    bottom: 0; */
    background: #FB6C68;
    color: #fff;
    line-height: 0.9rem;
    text-align: center;
    font-size: 14px;
    z-index: 99;
}

.bottom_fiexd:after {
    margin-left: .05rem;
    margin-right: -.08rem;
    display: inline-block;
    font-family: YDUI-INLAY;
    font-size: 12px;
    content: "\E608";
}

.bottom_fiexd:after {
    font-size: 14px;
}
</style>